<template> 
  <div class="healthy-wrap"> 
    <div class="l-wrap"> 
      <div class="l-title">近五次健康申报信息</div> 
      <div class="msg-list" ref="msgList"> 
        <div 
          class="item" 
          :class="index==0?'selected':''"
          v-for="(item, index) in declareInfo" 
          :key="index" 
          @click.stop="handleClick($event, item, index)">
          <div class="tag">
            <el-tag class="tagItem" size="small" type="danger">高风险</el-tag>
          </div>
          <div class="line">
            <span class="label-color">触发地：</span>
            {{item.test1}}
          </div>
          <div class="line">
            <span class="label-color">入黔后抵达地址：</span>
             {{item.test2}}
          </div>
          <div class="line">
            <span class="label-color">申报时间：</span>
            {{item.test3}}
          </div>
        </div>
      </div>
    </div>
    <div class="r-wrap">
      <el-tabs @tab-click="switchTab" v-model="activeName" type="border-card">
        <el-tab-pane label="申报信息" name="msg" >
          <div class="msg-tab">
            <div class="msg-title">
              基本信息
            </div>
            <div class="info-detail">
              <div class="col-item short-msg label-color">
                姓名：{{activeObj.test4}}
              </div>
              <div class="col-item short-msg label-color">
                手机号码：{{activeObj.test5}}
              </div>
              <div class="col-item long-msg label-color">
                触发地：{{activeObj.test1}}
              </div>
              <div class="col-item short-msg label-color">
                性别：{{activeObj.test6}}
              </div>
              <div class="col-item short-msg label-color">
                身份证号：{{activeObj.test7}}
              </div>
              <div class="col-item long-msg label-color">
                入黔后抵达地址：{{activeObj.test2}}
              </div>
            </div>
            <div class="msg-title">
              健康状况
            </div>
            <div class="msg-tags">
              <el-tag class="tagItem" size="small" type="danger">密切接触史（与确诊病例、无症状感染这、核酸检测阳性者有密切接触）</el-tag>
              <el-tag class="tagItem" size="small" type="danger">中高风险地区旅居史</el-tag>
              <el-tag class="tagItem" size="small" type="danger">境外旅居史</el-tag>
              <el-tag class="tagItem" size="small" type="danger">无</el-tag>
            </div>
            <div class="msg-title">
              核酸检测
            </div>
            <div class="info-detail">
              是否有48小时内的核酸检测阴性证明：{{activeObj.test8}}
            </div>
            <div class="msg-title">
              货物运输信息
            </div>
            <div class="info-detail">
              <div class="col-item ave label-color">
                是否为货物运输人员：{{activeObj.test9}}
              </div>
              <div class="col-item ave label-color">
                货物类型：{{activeObj.test10}}
              </div>
              <div class="col-item ave label-color">
                货物信息：{{activeObj.test11}}
              </div>
              <div class="col-item ave label-color">
                收货方联系方式：{{activeObj.test12}}
              </div>
              <div class="col-item ave label-color">
                车牌号：{{activeObj.test13}}
              </div>
              <div class="col-item ave label-color">
                货物名称：{{activeObj.test14}}
              </div>
              <div class="col-item ave label-color">
                运送目的地：{{activeObj.test15}}
              </div>
            </div>
            <div class="msg-title">
              行程核验
            </div>
            <div class="info-detail">
              <div class="l-msg">
                <div class="label-color">手机号码：{{activeObj.test16}}</div>
                <div class="label-color">日期时间：{{activeObj.test17}}</div>
                <div class="label-color">近14天到达或途经：{{activeObj.test18}}</div>
              </div>
              <div class="r-img">
                <el-image 
                  style="width: 100px; height: 100px"
                  :src="url" 
                  :preview-src-list="srcList">
                </el-image>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="问题发现" name="ques">
          <div class="msg-tab">
            <div class="msg-title">
              风险等级
            </div>
            <div>
              <el-tag class="tagItem" size="small" type="danger">{{activeObj.test19}}</el-tag>
            </div>
            <div class="msg-title">
              问题发现
            </div>
            <div class="msg-tip error-color">
              <p>1、境外来（返）黔未完成14天集中隔离</p>
              <p>2、入黔前出发地为中高风险地区【地区名称】</p>
              <p>3、贵州健康码为红色</p>
            </div>
            <div class="msg-title">
              防控措施
            </div>
            <div class="msg-tip error-color">
              <p>1、立即实施隔离，移交当地社防组转隔离酒店</p>
              <p>2、立即实施隔离，移交当地社防组转隔离酒店</p>
              <p>3、立即实施隔离，移交当地社防组转隔离酒店</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HealthyDeclare',
  data() {
    return {
      activeName:"msg",
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      // 选中当前申报信息
      activeObj: {},
      declareInfo:[
        {
          test1: "中天未来方舟F组团第五栋2507",  //触发地
          test2: "中天未来方舟F组团第五栋2507", //入黔后抵达地址
          test3: "2020-04-14 16:10:55", //申报时间
          test4: "张杨可乐1", //姓名
          test5: "15220236785", //基本信息手机号码
          test6: "男", //性别
          test7: "520000019992021", //身份证号
          test8: "有", //是否有48小时内的核酸检测阴性证明
          test9: "是", //是否为货物运输人员
          test10: "境内货物", //货物类型
          test11: "XXXX公司", //收货信息
          test12: "13926563456", //收货方联系方式
          test13: "浙C66666", //车牌号
          test14: "蔬菜", //货物名称
          test15: "13926563456", //运送目的地
          test16: "13312345678", //行程核验手机号码
          test17: "2022-04-18 12:22:35", //日期时间
          test18: "贵州省贵阳市南明区*", //近14天到达或途经
          test19: "高风险", //风险等级
        },
        {
          test1: "中天未来方舟F组团第六栋2507",  //触发地
          test2: "中天未来方舟F组团第六栋2507", //入黔后抵达地址
          test3: "2020-04-14 16:10:55", //申报时间
          test4: "张杨可乐2", //姓名
          test5: "15220236785", //手机号码
          test6: "女", //性别
          test7: "1828600019992021", //身份证号
          test8: "无", //是否有48小时内的核酸检测阴性证明
          test9: "是", //是否为货物运输人员
          test10: "境外货物", //货物类型
          test11: "XXXX营业厅", //收货信息
          test12: "13926563456", //收货方联系方式
          test13: "贵A66666", //车牌号
          test14: "设备", //货物名称
          test15: "13926563456", //运送目的地
          test16: "13312345678", //手机号码
          test17: "2022-04-18 12:22:35", //日期时间
          test18: "贵州省贵阳市南明区*", //近14天到达或途经
          test19: "高风险", //风险等级
        },
      ],
    }
  },
  mounted(){
    // 初始化Tab
    this.activeObj = this.declareInfo[0];
  },
  methods:{
    // 选择申报信息
    handleClick(e, item, index){
      let children = this.$refs.msgList.children;
      for(let child of children){
        if(child==e.currentTarget){
          child.classList.add("selected");
        }else{
          child.classList.remove("selected");
        }
      }
      // 清除Tab数据再赋值
      if(JSON.stringify(this.activeObj)!="{}"){
        this.activeObj = {};
      }
      this.activeObj = item;
    },
    // 切换Tab页
    switchTab(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>
<style lang="scss">
.r-wrap{
  .el-tabs__nav-scroll{
    padding-left: 0px !important;
  }
  .el-tabs__item{
    font-size: 16px;
  }
}
</style>
<style lang="scss" scoped>
.healthy-wrap{
  display: flex;
  display: -webkit-flex;
  padding: 1rem;
  .l-wrap{
    width: 25%;
    border-right: 1px solid #ced6e0;
    padding-right: 1rem;

    .l-title{
      font-weight: 600;
      margin-bottom: 1rem;
    }
  }
  .r-wrap{
    flex: 1;
    padding-left: 1rem;
  }
}
.msg-list{
  .item{
    cursor: pointer;
    padding: 0.7rem;
    border: 1px solid #eee;
    border-radius: 2px;
    // box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    margin-bottom: 12px;
    .tag{
      text-align: right;
    }
    .line{
      margin-top: 0.5rem;
    }
  }
  .item:hover {
    box-shadow:1px 1px 2px rgba(192,192,192,0.3),-1px -1px 2px rgba(192,192,192,0.3);
  }
  .item.selected {
    box-shadow:1px 1px 2px rgba(192,192,192,0.3),-1px -1px 2px rgba(192,192,192,0.3);
  }
}

.msg-tab{
  padding: 0 0.5rem;
  .msg-title{
    color: rgba(0, 133, 255, 1);
    margin: 1rem 0;
  }
  .msg-tags{
    .tagItem{
      margin-right: 1rem;
    }
  }
  .msg-tip{
    font-size: 14px;
  }
  .info-detail{
    padding: 10px 0;
    font-size: 12px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items: center;
    .col-item{
      display: flex;
      padding: 5px 0;
      div:first-child{
        width: 115px;
        text-align: right;
      }
    }

    .long-msg{
      width: 50%;
    }

    .short-msg{
      width: 25%;
    }

    .ave{
      width: 33%;
    }

    .l-msg{
      div{
        padding: 8px 0;
      }
    }

    .r-img{
      margin-left: 3rem;
    }
  }
}

</style>